<script setup lang='ts'>
import { ref } from 'vue';

const flag=ref(false)
</script>

<template>
<button @click="flag=!flag">切换</button>
<transition>
  <div class="box" v-if="flag"></div>
</transition>
<!-- <transition>
  <div class="box" v-if="flag"></div>
</transition> -->
</template>

<style scoped>
.box{
  width: 300px;
  height: 300px;
  background-color: aquamarine;
}
.v-enter-from{
  opacity: 0;
  width: 0;
  height: 0;
}
.v-enter-active{
   transition: all 2s linear;
}
.v-enter-to{
  opacity: 1;
  width: 300px;
  height: 300px;
}
.v-leave-from{
  opacity: 1;
  width: 300px;
  height: 300px;
}
.v-leave-active{
   transition: all 2s linear;
}
.v-leave-to{
  opacity: 0;
  width: 0;
  height: 0;
}
</style>
